<extend name="./Common/View/Public/base.html" />
<block name="main">
    <div class="layui-tab layui-tab-brief" lay-filter="user" id="LAY_uc">
        <ul class="layui-tab-title" id="tabNav">
            <li data-type="mine-jie" lay-id="unreadTab" class="layui-this">未读消息</li>
            <li data-type="collection" data-url="/collection/find/" lay-id="readedTab">已读消息</li>
        </ul>
        <div class="layui-tab-content" id="tabContent" style="padding: 5px 0;">
            <div class="layui-tab-item layui-show">
                <table class="layui-hide" id="unreadList" lay-filter="unread"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="readedList" lay-filter="readed"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="readbar">
        <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="read">标记已读</a>
    </script>
    <script type="text/html" id="tpl_type">
        {{ format_message_type(d.type) }}
    </script>
</block>
<block name="script">
    <script src="/api/sys/dict/format"></script>
    <script>
    layui.use(['table', 'form', 'layer', 'element', 'jquery'], function () {
        var table = layui.table
        , layer = layui.layer
        , form = layui.form
        ,element = layui.element;

        table.render({
            elem: '#unreadList'
            , url: 'message/unread'
            , cols:  [[
                {field:'title', minWidth:300, title : '标题', event: 'view', style:'cursor: pointer;'}
                , {field:'type', minWidth:80,templet: '#tpl_type', title : '消息类型'}
                , {field:'send_time', minWidth:200, title : '发送时间'}
                ,{fixed: 'right', title: '操作', width:100, align:'center', toolbar: '#readbar'}
            ]]
            ,cellMinWidth: 40
            , id: 'unreadTable'
            , page: true
            , height: 'auto'
            , limits: [10, 15, 20, 30, 50, 100, 500]
            , limit: 10 //默认采用10
            , response: {statusName: 'error', statusCode: 0, msgName: 'message', countName: 'total',dataName: 'rows'}
        });
        table.render({
            elem: '#readedList'
            , url: 'message/readed'
            , cols:  [[
                {field:'title', minWidth:300, title : '标题', event: 'view', style:'cursor: pointer;'}
                , {field:'type', minWidth:80,templet: '#tpl_type', title : '消息类型'}
                , {field:'send_time', minWidth:200, title : '发送时间'}
            ]]
            ,cellMinWidth: 40
            , id: 'readedTable'
            , page: true
            , height: 'auto'
            , limits: [10, 15, 20, 30, 50, 100, 500]
            , limit: 10 //默认采用10
            , response: {statusName: 'error', statusCode: 0, msgName: 'message', countName: 'total',dataName: 'rows'}
        });

        table.on('tool(readed)', function(obj){
            var data = obj.data;
            if(obj.event === 'view'){
                view(data.id, data.title);
            }
        });
        table.on('tool(unread)', function(obj){
            var data = obj.data;
            if(obj.event === 'view'){
                view(data.id, data.title);
            }else if(obj.event === 'read'){
                read(data.id);
            }
        });

        function view(id, title) {
            layer.open({
                title : title,
                type: 2,
                area: ['600px', '400px'],
                content:app.api+'sys/message/view/id/'+id
            });
        }
        function read(id, title) {
            $.get(app.api+'sys/message/read/id/'+id, function(res){
                if(res.error == '0'){
                    table.reload('unreadList');
                    table.reload('readedList');
                }else{
                    app.error(res.message);
                }
            });
        }
    });
    </script>
</block>